<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>最简单的布局</title>
<script type="text/javascript" src="./scripts/jquery-1.9.0.js"></script>

<script type="text/javascript" src="./scripts/jquery-ui/js/jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/jquery-ui/css/ui-lightness/jquery-ui-1.10.0.custom.css" />

<script type="text/javascript" src="./scripts/jquery.layout-latest.js"></script>
<link rel="stylesheet" type="text/css"	href="./scripts/layout-default-latest.css" />
<script type="text/javascript" src="./scripts/debug.js"></script>
<style type="text/css">
html {
/* 	background: #99C; */
	background: blue;
	padding: 0px; /* will add spacing from viewport around BODY */
	display: block !important;
}

body {
	background: green;
/* 	background: #CC9; */
	padding: 10px;
	/* the 'inset' of the body-layout, UNLESS an inset option overrides it */
	min-height: 300px;
	min-width: 600px;
	/* border causes a positioning error in UI Draggable
		border:		10px solid red;
		*/
	/* margin causes a positioning error in UI Draggable
		/* override layout style to 'center' the body * /
		margin:		0 auto !important; /* does not center in IE8 or less * /
		max-width:	1100px;
		width:		1100px;
		*/
}

body>.ui-layout-center {
	background: red;
/* 	background: #9B9; */
	padding: 0;
	/* center-container inset will be created by an inset option */
}
body>.ui-layout-center>.ui-layout-center {
	background: black;
/* 	background: #9B9; */
	padding: 0;
	/* center-container inset will be created by an inset option */
}
</style>

<script type="text/javascript">
	var inset50 = {
		top : 50,
		bottom : 50,
		left : 50,
		right : 50
	};

	var layoutOptions = {
		center__childOptions : {
			inset : {
				top : 20,
				bottom : 20,
				left : 20,
				right : 20
			}
		}
	};

	$(document).ready(function() {
		$('body').layout(layoutOptions);
	});
</script>


</head>
<body>
	<div class="ui-layout-center">
		<div class="ui-layout-center">
			Inner Center
			<p>
				<a href="http://layout.jquery-dev.net/demos.html"><b>Go to
						the Demos page</b></a>
			</p>
			<p style="line-height: 2em;">
				<button onclick="$('body').layout( layoutOptions )">Create
					Layouts</button>
				&nbsp;<br />

				<button
					onclick="var inst = $('body').data('layout'); if (inst) inst.destroy();">Destroy
					Layouts</button>
				&nbsp;<br />

				<button
					onclick="var inst = $('body').layout( layoutOptions ).center.children.layout1; inst.options.inset = inset50; inst.resizeAll(true);">inner
					- insets = 50</button>
				&nbsp;<br />
				<button
					onclick="var inst = $('body').layout( layoutOptions ).center.children.layout1; inst.options.outset = inset50; inst.resizeAll(true);">inner
					- outsets = 50</button>
				&nbsp;<br />

				<button
					onclick="var inst = $('body').layout( layoutOptions ); inst.options.inset = inset50; inst.resizeAll(true);">outer
					- insets = 50</button>
				&nbsp;<br />

				<!-- requires Layout RC30.72 -->
				<button
					onclick="var inst = $('body').layout( layoutOptions ); inst.options.outset = inset50; inst.resizeAll(true);">outer
					- outsets = 50</button>
				&nbsp;


			</p>
		</div>
		<div class="ui-layout-north">Inner North</div>
		<div class="ui-layout-south">Inner South</div>
		<div class="ui-layout-east">Inner East</div>
		<div class="ui-layout-west">Inner West</div>
	</div>
	<div class="ui-layout-north">Outer North</div>
	<div class="ui-layout-south">Outer South</div>
	<div class="ui-layout-east">Outer East</div>
	<div class="ui-layout-west">Outer West</div>

</body>

</html>